<template>
    <div>
        <div class="hen">
            <el-row class="hengfu">
                <el-col :span="12">
                    <el-page-header @back="goBack">
                        <template #content>
                            <el-breadcrumb-item :to="{ path: '/exam/testpaper' }">试卷列表</el-breadcrumb-item>
                        </template>
                    </el-page-header>
                </el-col>
            </el-row>
        </div>

        <div class="tab">
            <div class="grid-content">
                <el-row>
                    <el-col :span="3">
                        <div>
                            <el-button color="#626aef" size="large" type="primary" plain
                                @click="addtestpaper">组卷</el-button>
                        </div>
                    </el-col>
                    <el-col :span="11">
                        <div class="flex">
                            <el-input v-model="obj.key" size="large" @input="inputs" style="width: 45vh;"
                                placeholder="请输入需要查询的试卷名" class="input-with-select">
                                <template #append>
                                    <el-button>查询</el-button>
                                </template>
                            </el-input>
                        </div>
                    </el-col>
                    <el-col :span="10">
                        <div class="flex">
                            <el-checkbox @change="(val) => checkbox(val, item)" v-for="(item, index) in detailsList"
                                :label="item.title" :key="index">
                                {{ item.title }}
                            </el-checkbox>
                        </div>
                    </el-col>
                </el-row>
            </div>

            <div class="trr">
                <el-table v-loading="loading" :data="tableData" height="53vh" max-height="53vh" border style="width: 100%"
                    @selection-change="handleSelectionChange">
                    <el-table-column type="selection" />
                    <el-table-column prop="name" label="试卷名" width="100" />
                    <el-table-column prop="mode" label="组卷">
                        <template #default="scope">
                            <el-tag>
                                {{ scope.row.mode == 1 ? '人工' : '随机' }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="lv" label="难度" width="85">
                        <template #default="scope">
                            <el-tag>
                                {{ scope.row.lv >= 5 ? '推荐' : '不推荐' }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="labels" label="标签" show-overflow-tooltip  width="120">
                        <!-- <template #default="scope">
                            <el-tag :key="item.id" v-for="item in scope.row.labels.split(',')">
                                {{ item }}
                            </el-tag>
                        </template> -->
                    </el-table-column>
                    <el-table-column prop="isPublish" label="发布">
                        <template #default="scope">
                            <el-tag class="ml-2" :type="scope.row.isPublish == 0 ? 'danger' : 'success'">{{
                                scope.row.isPublish == 0 ? '否' : '是' }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="isBan" label="禁用">
                        <template #default="scope">
                            <el-tag class="ml-2" :type="scope.row.isBan == 0 ? 'success' : 'danger'">{{ scope.row.isBan == 0
                                ? '否' : '是' }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="添加时间" width="140" />
                    <el-table-column prop="count" label="题目" />
                    <el-table-column prop="useCount" label="使用次数" width="85" />
                    <el-table-column prop="author" label="作者" />
                    <el-table-column label="操作" width="280" fixed="right">
                        <template #default="scope">
                            <el-button type="primary" plain size="small" color="#626aef"
                                @click="select(scope.row)">详细</el-button>
                            <template v-if="(scope.row.isPublish == 0)">
                                <el-button type="success" size="small" @click="PublishTestPaper(scope.row)">发布</el-button>
                                <el-button type="danger" size="small" plain @click="sc(scope.row)">删除</el-button>
                            </template>
                            <template v-else>
                                <template v-if="(scope.row.isBan == 0)">
                                    <el-button type="danger" size="small" @click="disable(scope.row)">禁用</el-button>
                                    <el-button type="info" size="small" @click="qx(scope.row)">取消</el-button>
                                </template>
                                <el-button type="success" plain size="small" @click="recover(scope.row)"
                                    v-else>恢复</el-button>

                            </template>

                        </template>
                    </el-table-column>
                </el-table>
                <div class="example-pagination-block" style="margin-top: 1vh;">
                    <el-pagination @current-change="changes" :page-size="obj.limit" :current-page="obj.page"
                        layout="prev, pager, next" :total="obj.index" />
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import type { TypeTestpaperDto } from '../../../type/testpaper'
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import { GetTestPapers, PublishTestPapers, BanTestPapers, DeleteTestPapers } from '../../../api/testpaper/testpaper'
import { ElMessageBox, ElNotification } from 'element-plus'
import { useRouter } from 'vue-router';


export default defineComponent({
    setup() {
        const router = useRouter();

        const data = reactive<TypeTestpaperDto>({
            detailsList: [
                {
                    "title": "禁用",
                },
                {
                    "title": "启用",
                },
                {
                    "title": "发布",
                },
                {
                    "title": "未发布",
                }
            ],
            tableData: [],  // 表格数据
            obj: {
                page: 1,        // 第几页 
                limit: 5,       // 多少条数据
                key: '',        // 题库查询条件 
                index: 0,       // 多少条数据 
            },
            isBan: -1,      // 禁用 
            isPublish: -1,  // 发布 
            disabled: true,
            loading: true   // 加载屏
        })

        const events = {
            goBack() {
                window.history.go(-1)
            },

            // 删除试卷
            sc(val: any) {
                ElMessageBox.confirm('确认要选择这些试题嘛！, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    data.loading=true
                    DeleteTestPapers({
                        ids: [val.id]
                    }).then((res: any) => {
                        if (res.result == 0) {
                            events.bind()
                            ElNotification({
                                title: '删除成功',
                                type: 'success',
                            })
                        } else {
                            events.bind()
                            ElNotification({
                                title: '删除失败',
                                type: 'success',
                            })
                        }
                    })
                })

            },

            // 跳转试卷详细
            select(val: any) {
                router.push({ path: `/exam/testpaper/detail/${val.id}` })
            },

            // 跳转组卷页面
            addtestpaper() {
                router.push({ path: `/exam/testpaper/addtestpaper` })
            },

            // page 改变时触发
            changes(val: any) {
                data.loading = true
                data.obj.page = val
                events.bind()
            },

            // 输入框查询
            inputs() {
                data.loading = true
                events.bind()
            },

            // 选择按钮
            handleSelectionChange() { },

            // 禁用试卷boout
            disable(val: any) {
                data.loading = true
                BanTestPapers({
                    ids: [val.id],
                    isBan: 1
                }).then((res: any) => {
                    if (res.result == 0) {
                        data.loading = false
                        events.bind()
                        ElNotification({
                            title: '禁用成功',
                            type: 'success',
                        })

                    } else {
                        data.loading = false
                        ElNotification({
                            title: '禁用失败',
                            type: 'warning',
                        })
                    }
                })
            },

            // 恢复试卷
            recover(val: any) {
                data.loading = true
                BanTestPapers({
                    ids: [val.id],
                    isBan: 0
                }).then((res: any) => {
                    if (res.result == 0) {
                        data.loading = false
                        events.bind()
                        ElNotification({
                            title: '禁用成功',
                            type: 'success',
                        })

                    } else {
                        data.loading = false
                        ElNotification({
                            title: '禁用失败',
                            type: 'warning',
                        })
                    }
                })
            },

            // 发布-取消试卷
            PublishTestPaper(val: any) {
                data.loading = true
                PublishTestPapers({
                    ids: [val.id],
                    isPublish: 1
                }).then((res: any) => {
                    if (res.result == 0) {
                        data.loading = false
                        events.bind()
                        ElNotification({
                            title: '发布成功',
                            type: 'success',
                        })

                    } else {
                        data.loading = false
                        ElNotification({
                            title: '发布失败',
                            type: 'warning',
                        })
                    }
                })
            },

            qx(val: any) {
                data.loading = true
                PublishTestPapers({
                    ids: [val.id],
                    isPublish: 0
                }).then((res: any) => {
                    if (res.result == 0) {
                        data.loading = false
                        events.bind()
                        ElNotification({
                            title: '取消成功',
                            type: 'success',
                        })

                    } else {
                        data.loading = false
                        ElNotification({
                            title: '取消失败',
                            type: 'warning',
                        })
                    }
                })
            },

            // 发布-禁用按钮
            checkbox(val: any, name: any) {
                data.loading = true
                if (name.title == "启用") {
                    if (val) {
                        if (data.isBan != -1) {
                            data.isBan = -1
                            events.bind()
                            return
                        }
                        data.isBan = 0
                        events.bind()
                    } else {
                        if (data.isBan == -1) {
                            data.isBan = 1
                            events.bind()
                            return
                        }
                        data.isBan = -1
                        events.bind()
                    }
                }
                if (name.title == "禁用") {
                    if (val) {
                        if (data.isBan != -1) {
                            data.isBan = -1
                            events.bind()
                            return
                        }
                        data.isBan = 1
                        events.bind()
                    } else {
                        if (data.isBan == -1) {
                            data.isBan = 0
                            events.bind()
                            return
                        }
                        data.isBan = -1
                        events.bind()
                    }
                }
                if (name.title == "发布") {
                    if (val) {
                        if (data.isPublish != -1) {
                            data.isPublish = -1
                            events.bind()
                            return
                        }
                        data.isPublish = 1
                        events.bind()
                    } else {
                        if (data.isPublish == -1) {
                            data.isPublish = 0
                            events.bind()
                            return
                        }
                        data.isPublish = -1
                        events.bind()
                    }
                }
                if (name.title == "未发布") {
                    if (val) {
                        if (data.isPublish != -1) {
                            data.isPublish = -1
                            events.bind()
                            return
                        }
                        data.isPublish = 0
                        events.bind()
                    } else {
                        if (data.isPublish == -1) {
                            data.isPublish = 1
                            events.bind()
                            return
                        }
                        data.isPublish = -1
                        events.bind()
                    }
                }
            },


            //查询题目
            bind() {
                GetTestPapers({
                    page: data.obj.page,
                    limit: data.obj.limit,
                    key: data.obj.key,
                    isBan: data.isBan,
                    isPublish: data.isPublish
                }).then((res: any) => {
                    data.loading = false
                    data.tableData = res.data.data
                    data.obj.index = res.data.total
                })
            }

        }

        onMounted(() => {
            events.bind()
        })

        return {
            ...toRefs(data),
            ...events
        }

    },
})
</script>

<style scoped>
/* 背景 */
.tab {
    /* background-color: rgb(239, 240, 242); */
    padding: 1vh;
    border-radius: 5px;
    margin-top:-1vh ;
}

/* 按钮样式 */
.grid-content {
    margin: auto;
    margin-top: 2vh;
    border-radius: 5px;
    background-color: rgb(251, 251, 251);
    width: 99%;
    line-height: 45px;
    text-align: left;
    padding: 10px;
    border: 1px solid darkgray;
    box-shadow: 0px 0px 2px grey;
}

.flex {
    float: right;
    /* margin-right: 2vh; */
}

.trr {
    margin: auto;
    margin-top: 2vh;
    border-radius: 5px;
    padding: 10px;
    width: 99%;
    background-color: rgb(251, 251, 251);
    box-shadow: 0px 0px 2px grey;
}
</style>
